<template>
  <div class="main">
    <!-- <img @click="jump('/turntableCoin')" src="@/assets/images/turntable/banner.jpg" alt /> -->
    <div class="icon">
      <div class="item" @click="jump('/management')">
        <!-- <img class="hot" src="@/assets/images/equity/hot.png" alt /> -->
        <img src="@/assets/images/equity/caifu/management.png" alt />
        <p>理财</p>
      </div>
      <div class="item" @click="jump('/fund')">
        <img src="@/assets/images/equity/caifu/fund.png" alt />
        <p>基金</p>
      </div>
      <div class="item" @click="jump('/insurance')">
        <img src="@/assets/images/equity/caifu/insurance.png" alt />
        <p>保险</p>
      </div>
      <div class="item" @click="jump('/metal')">
        <img src="@/assets/images/equity/caifu/metal.png" alt />
        <p>贵金属</p>
      </div>
      <div class="item" @click="jump('/deposit')">
        <img src="@/assets/images/equity/caifu/deposit.png" alt />
        <p>资金存管</p>
      </div>
      <div class="item" @click="jump('/debt')">
        <img src="@/assets/images/equity/caifu/debt.png" alt />
        <p>国债</p>
      </div>
      <!-- <div class="item" @click="jump('/construction')">
        <img src="@/assets/images/equity/caifu/game.png" alt />
        <p>市场资讯</p>
      </div>-->
    </div>
  </div>
</template>
<script>
import weixin from '@/components/wx/wx.js';
import { baseUrl } from '@/config/env';
// import moment from 'moment';
export default {
  data() {
    return {};
  },
  mounted() {
    this.initWxChat();
  },
  methods: {
    initWxChat() {
      const url = window.location.href.split('#')[0];
      const param = {
        title: '财富资讯',
        desc: '',
        link:
          baseUrl + 'entrance/goto?redir=' + window.location.href.split('#')[1],
        imgUrl: 'http://img.580travel.com/youchu/caifu.png',
        localUrl: url
      };
      weixin.wxChat(this, param);
    },
    jump(page) {
      this.$router.push(page);
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.icon {
  width: 100%;
  display: flex;
  flex-direction: row;
  // justify-content: space-around;
  flex-wrap: wrap;
  background-color: #ffffff;
  align-items: center;
  .item {
    position: relative;
    width: 185px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .hot {
      width: 50px;
      position: absolute;
      top: 0;
      right: 10px;
    }
    img {
      width: 81px;
    }
    p {
      font-size: 24px;
      color: #616161;
      margin-top: 20px;
    }
  }
}
.bottom_item {
  margin-top: 30px;
  width: 750px;
  height: 440px;
  background-color: #ffffff;
  .botttom_title {
    display: flex;
    flex-direction: row;
    padding-left: 30px;
    padding-top: 30px;
    img {
      width: 50px;
    }
    p {
      font-size: 30px;
      letter-spacing: 1px;
      color: #303030;
      padding-left: 20px;
    }
  }
  .card {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    img {
      width: 334px;
      margin-top: 30px;
    }
  }
}
</style>
